<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习2:表单验证提示</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id = 'app'>
        <form action="#">
            用户名：<input type="text" v-model = 'username'>
            密码：<input type="password" v-model = 'password' @input="handleInput">
            <p v-show = 'showMima'>密码强度{{qiangluo}}</p>
            <p v-show = 'showXinxi'>{{xinxi}}</p>
            <button @click = 'panduan'>登录</button>
        </form>
    </div>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            qiangluo: '弱',
            xinxi: '',
            showMima: true,
            showXinxi: false
        },
        methods: {
            handleInput() {
                if (this.password.length >= 6) {
                    this.showMima = false
                } else if (this.password.length >= 4) {
                    this.qiangluo = '中'
                } else {
                    this.qiangluo = '弱'
                }
            },

            panduan() {
                if (this.username == '' && this.password == '') {
                    this.showXinxi = true
                    this.xinxi = '注册失败，用户名和密码不能为空'
                }else{
                    this.showXinxi = true
                    this.xinxi = '注册成功'
                }
            }
        }
    })

</script>